<template>
	<el-card class="columnnav">
		<template #header>
			<div class="button-container">
				<h4>用户注册</h4>
			</div>
		</template>

		<el-form :model="form" ref="form" label-width="60px" :rules="rules">
			<el-form-item label="账号:" prop="username">
				<el-input v-model="form.username" />
			</el-form-item>

			<el-form-item label="密码:" prop="password">
				<el-input v-model="form.password" show-password />
			</el-form-item>
			<el-form-item label="昵称:" prop="nickname">
				<el-input v-model="form.nickname" />
			</el-form-item>
			<el-form-item label="邮箱:" prop="email">
				<el-input v-model="form.email" />
			</el-form-item>
			<el-form-item label="QQ:" prop="QQ">
				<el-input v-model="form.QQ" />
			</el-form-item>
			<el-form-item label="微信:" prop="WeChat">
				<el-input v-model="form.WeChat" />
			</el-form-item>
			<el-form-item label="电报:" prop="telegram">
				<el-input v-model="form.telegram" />
			</el-form-item>
			<el-form-item>
				<el-checkbox v-model="form.agreement" label="" size="large" />
				<span>阅读并接受</span><el-button link type="primary">DEXC网站协议</el-button><span>和</span><el-button link type="primary">隐私协议</el-button>
			</el-form-item>
		</el-form>
		<div class="button-container"> <el-button type="primary" @click="register()">注册账号</el-button> </div>
	</el-card>
</template>
<script>
	import { dataRequest as api, automaticLogin } from '@/api/api'
	import { previousRoute } from '@/router'
	import sha256 from 'crypto-js/sha256'
	import { watch } from 'vue'
	import { mapState } from 'vuex'
	export default {
		name: 'reg',
		computed: {
			...mapState(['user']),
		},
		data() {
			return {
				form: {
					username: '',
					nickname: '',
					password: '',
					email: '',
					QQ: '',
					WeChat: '',
					telegram: '',
					agreement: false,
				},
				rules: {
					username: [
						{ required: true, message: '请输入账号', trigger: 'blur' },
						{ pattern: /^[a-zA-Z][a-zA-Z0-9]{4,15}$/, message: '账号长度在5-16字节,字母开头 只允许字母数字', trigger: 'blur' },
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,18}$/, message: '密码必须包含大小写字母和数字 长度在8-18位之间', trigger: 'blur' },
					],
					email: [
						{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
						{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
					],
					nickname: [
						{ required: false, message: '请输入昵称', trigger: 'blur' },
						{ min: 3, max: 16, message: '长度在 3 到 16个字符', trigger: 'blur' },
					],
					QQ: [
						{ required: false, message: '请输入QQ号码', trigger: 'blur' },
						{ pattern: /^[1-9]\d{5,13}$/, message: '必须为有效的QQ号码，长度在5到13个字符', trigger: 'blur' },
					],
					WeChat: [
						{ required: false, message: '请输入微信号码', trigger: 'blur' },
						{ pattern: /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/, message: '必须为有效的微信号码，以字母开头，长度在6到20个字符之间', trigger: 'blur' },
					],
					telegram: [
						{ required: false, message: '请输入Telegram号码', trigger: 'blur' },
						{ pattern: /^[a-zA-Z][a-zA-Z0-9_-]{4,31}$/, message: '必须为有效的Telegram号码，以字母开头，长度在5到32个字符之间', trigger: 'blur' },
					],
				},
			}
		},
		methods: {
			// 函数
			// async mail() {
			// 	let arr = await api(['mail', ''])
			// 	console.log(arr)
			// },
			async register() {
				this.$refs['form'].validate(async valid => {
					if (valid) {
						let data = { ...this.form } // 使用展开语法将 obj1 的属性展开到 obj2 中
						delete data.agreement
						data.password = sha256(sha256(data.password)).toString()
						let arr = await api(['Registration', data])
						console.log(arr)
						if (arr.code == 200) {
							// 注册成功
							this.$message.success('注册成功')
							let arr = await api(['JWT', { username: data.username, password: data.password }])
							if (arr.code == 200) {
								const data = { id: 1, JWT: arr.data, userid: arr.massage, logon: false }
								if (await this.$indexedDB.getObject(data.id)) {
									// 存在修改
									this.$indexedDB.updateObject(data)
								} else {
									// 不存在 添加
									this.$indexedDB.addObject(data)
								}
								await automaticLogin()
								this.centerDialogVisible = false
							} else {
								this.$message.error('账号或密码错误')
							}
						} else {
							//   注册失败
							this.$message.error(`注册失败:${arr.data}`)
						}
					} else {
						return false
					}
				})
			},
		},
		mounted() {
			if (this.user) {
				let path = previousRoute ? (previousRoute.fullPath == '/register' ? '/' : previousRoute.fullPath) : '/'
				this.$router.push(path)
			}
		},
		watch: {
			user(newMedium, old) {
				if (newMedium) {
					let path = previousRoute ? (previousRoute.fullPath == '/register' ? '/' : previousRoute.fullPath) : '/'
					this.$router.push(path)
				}
			},
		},
	}
</script>
<style>
	.el-card__body {
		padding: 20px 30px;
	}
	@media screen and (max-width: 860px) {
		.columnnav .el-card__body {
			padding: 0.2rem 0.1rem;
		}
	}
</style>
<style scoped>
	.columnnav {
		margin-top: 30px;
		width: 400px !important;
	}
	.el-checkbox {
		margin-right: 5px !important;
	}
	.button-container {
		display: flex;
		justify-content: center; /* 水平居中 */
	}
	@media screen and (max-width: 860px) {
		.columnnav .el-card__body {
			padding: 0.2rem 0.2rem;
		}
		.columnnav {
			margin-top: 0.05rem;
			width: 3.7rem !important;
		}
	}
</style>
